<template>
	<div class="big-container" style="padding: 20px 0;">
		<div class="container-content inner-box">
			<div class="start-layout top-bread">
				<i class="el-icon-location"></i>
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item
						:to="{path:'/affairsOpen',query:{id:'1817835226660691968'}}">{{routeName}}</el-breadcrumb-item>
					<el-breadcrumb-item
						v-if="currentObj.dictLabel!=routeName">{{currentObj.dictLabel}}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div style="padding-top: 20px;">
				<el-row :gutter="30">
					<el-col :span="5">
						<div class="left-content">
							<div @click="changeMenu(item)" v-for="(item,index) in menuList" :key="index"
								:class="currentObj.dictCode==item.dictCode?'tabItem-active':'tabItem-empty'"
								class="tabItem-item one_line">
								{{item.dictLabel}}
							</div>
						</div>
					</el-col>
					<el-col :span="19">
						<div class="right-content">
							<div class="inner-title start-layout">
								<div class="inner-name">{{currentObj.dictLabel}}
									<div class="inner-line"></div>
								</div>
							</div>
							<div style="min-height: 420px;">
								<el-empty v-if="dataList.length==0" :image-size="200"></el-empty>
								<div @click="toDetail(item.baseId)" v-for="(item,index) in dataList" :key="index"
									class="between-layout intro-item">
									<div style="flex: 1;width: 0;" class="start-layout">
										<div class="intro-dot"></div>
										<div class="intro-name one_line">{{item.title}}</div>
									</div>
									<div class="intro-date">{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}</div>
								</div>
							</div>
							<div v-if="total>0" style="margin-top: 50px;" class="end-layout">
								<el-pagination class="msg-pagination-container" background
									@current-change="handleCurrentChange" :current-page.sync="qureyForm.pageNum"
									:page-size="10" layout="prev, pager, next, jumper" :total="total">
								</el-pagination>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getMultiDict,
		getFrontList
	} from "@/api/index";
	export default {
		data() {
			return {
				menuList: [],
				dataList: [],
				routeName: '检务公开',
				currentObj: {
					dictCode: '1817835226660691968',
					dictLabel: '检务公开'
				},
				qureyForm: {
					pageSize: 10,
					pageNum: 1,
					tenantId: process.env.VUE_APP_TENANTID
				},
				total: 0
			}
		},
		mounted() {
			window.scrollTo(0, 0);
		},
		created() {
			getMultiDict({
				tenantId: process.env.VUE_APP_TENANTID,
				parentCode: this.$route.query.id
			}).then(res => {
				this.menuList = res.data
			})
			if (this.$route.query.twoId) {
				this.currentObj = {
					dictCode: this.$route.query.twoId,
					dictLabel: this.$route.query.name
				}
				this.getList()
			} else {
				this.getList()
			}
		},
		methods: {
			getList() {
				getFrontList(this.qureyForm, {
					typeAncestors: this.currentObj.dictCode
				}).then(res => {
					this.dataList = res.rows
					this.total = res.total
				})
			},
			changeMenu(item) {
				this.currentObj = item
				this.qureyForm.pageNum = 1
				this.getList()
			},
			handleCurrentChange(val) {
				this.qureyForm.pageNum = val
				this.getList()
			},
			//跳转详情
			toDetail(id) {
				this.$router.push({
					name: 'commonDetail',
					query: {
						id: id,
						name: this.routeName,
						twoName: this.currentObj.dictLabel,
						routePath: '/affairsOpen',
						routeId: '1817835226660691968'
					}
				})
			}
		}
	}
</script>

<style scoped>
	::v-deep .el-icon-location {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 22px !important;
		margin-right: 6px;
	}

	::v-deep .el-icon-arrow-right {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 18px !important;
	}

	/* 不被选中时的颜色 */
	.el-breadcrumb ::v-deep .el-breadcrumb__inner {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 18px !important;
	}
</style>